<template>
	<!-- content为最上方内容 -->
	<view class="content">
		还剩
		<uni-countdown :show-day="false" :hour="false" :minute="false" :second="59" color="#FF0000"  @timeup="timeup"></uni-countdown>
		自动关闭订单
	</view>
	<!-- opt为两个按钮 -->
	<view class="opt">
		<navigator url="/pages/spxq_wyc/pay_true" class="button_1">立即支付</navigator>
		<navigator url="/pages/spxq_wyc/spxq_kf" class="button_2">联系客户</navigator>
	</view>
	<!-- ad为广告 -->
	<view class="ad">
		<view class="ad_nav">相关推荐</view>
		<view class="ad_c" v-for="item in ad_data" :key="item.id">
			<view>
				<image :src="item.img" mode="" class="ad_img"></image>
			</view>
			<view>{{item.name}}</view>
			<view>{{item.yh}}</view>
			<view>&yen; {{item.num}}</view>	
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ad_data:[{
					id:'1',
					img:'../../static/person_image/黄宗泽.png',
					name:'防寒服 冬季防风加厚外套户外加绒内衣',
					yh:'十公里可抵押100元',
					num:'550'
				},{
					id:'2',
					img:'../../static/person_image/黄宗泽.png',
					name:'防寒服 冬季防风加厚外套户外加绒内衣',
					yh:'十公里可抵押100元',
					num:'550'
				},{
					id:'3',
					img:'../../static/collection-image/冲锋衣.jpeg',
					name:'防寒服 冬季防风加厚外套户外加绒内衣',
					yh:'十公里可抵押100元',
					num:'550'
				},{
					id:'4',
					img:'../../static/person_image/黄宗泽.png',
					name:'防寒服 冬季防风加厚外套户外加绒内衣',
					yh:'十公里可抵押100元',
					num:'550'
				}]
			}
		},
		methods: {
			timeup(){
				console.log('倒计时结束');
				uni.navigateTo({
					url: '/pages/spxq_wyc/spxq_wyc'
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.ad{
		display:flex;
		flex-wrap:wrap;
		.ad_nav {
			width: 750rpx;
			background-color: #FAFAFA;
			padding: 20rpx;
			margin-bottom: 20rpx;
		}
		.ad_c{
			display:flex;
			flex-direction:column;
			align-items:center;
			width: 375rpx;
			margin-bottom: 30rpx;
			>view {
				width: 300rpx;
				padding: 15rpx 15rpx 0 15rpx;
				background-color: #fafafafa;
			}
			.ad_img{
				height: 280rpx;
				width: 300rpx;
				background-color: #F2F2F2;
			}
			view:nth-of-type(3){
				color: #FE1D22;
			}
			view:nth-of-type(4){
				color: #E04F06;
				font-size: 40rpx;
			}
		}
	}
	.opt{
		display:flex;
		justify-content:space-around;
		color: #FFFFFF;
		margin-bottom: 100rpx;
		.button_1{
			background-color: #999999;
			padding: 10rpx 80rpx;
			border-radius: 50rpx;
		}
		.button_2{
			background-color: #D7D7D7;
			padding: 10rpx 80rpx;
			border-radius: 50rpx;
		}
	}
	.content{
		border-top: 1px solid #DBDBDB;
		margin-top: 5rpx;
		padding: 100rpx 0;
		display:flex;
		justify-content:center;
		color:#FF0000;
	}
</style>
